<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>查看人员列表管理</title>
		<!-- Bootstrap -->
		<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
		<link href="fonts/iconfont.css" rel="stylesheet">
		<link href="../assets/css/style.css" rel="stylesheet" />
		<link href="../assets/css/tabletable.css" rel="stylesheet" />
		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
		      <script src="../assets/js/html5shiv.min.js"></script>
		      <script src="../assets/js/respond.min.js"></script>
		      <![endif]-->
	</head>

	<body>
		<!--内容区域-->
		<div class="content">
			<div class="content-header col-md-12">
				<div class="con-header">
					<div class="col-md-7 col-sm-7 col-xs-7">
						<span class="content-title-pre"></span><span class="content-title-word">查看人员—合作伙伴，名称</span>
					</div>
					<div class="col-md-5 col-sm-5 col-xs-5">
						<button type="button" class="btn btn-info btn-header" data-toggle="modal" data-target="#add_store">添加+</button>
					</div>
				</div>
			</div>
			<div class="content_serach row">
				<input type="text" class="form-control serach_input" placeholder="请输入名称">
				<select class="form-control serach_select">
					<option>全部商家</option>
					<option>全部商家</option>
					<option>全部商家</option>
					<option>全部角色</option>
					<option>全部角色</option>
				</select>
				<select class="form-control serach_select">
					<option>全部角色</option>
					<option>全部角色</option>
					<option>全部角色</option>
					<option>全部角色</option>
					<option>全部角色</option>
				</select>
				<button type="button" class="btn btn-info serach_btn">搜索&nbsp;&nbsp;<i class="icon iconfont icon-sousuo icon_serach"></i></button>
			</div>
			<div class="table-responsive mt20">
				<table class="table">
					<thead class="tablethead">
						<tr>
							<!--单选-->
							<!--<th class="choice">
				  			<label class="radio disables"><input type="radio" name="radio" disabled><i></i></label>  
				  		</th>-->
							<!--多选-->
							<th class="firstth" >
				  			<div class="checkdis"></div>
				  		</th>
							<th class="secondta" valign="middle">序号</th>
							<th >账号</th>
							<th>姓名</th>
							<th>电话</th>
							<th>角色</th>
							<th>创建时间</th>
							<th>状态</th>
							<th>所在商家</th>
							<th class="text-center">操作</th>
						</tr>
					</thead>
					<tbody class="mytable">
						<tr>
							<!--单选-->
							<!--<td class="choice">
				  			<label class="radio"><input type="radio" name="radio" checked><i></i></label>  
				  		</td>-->
							<!--多选-->
							<td class="firsttd">
							<div class="checkboxes checkno" onclick="checks(this);"></div>
						</td>
							<td class="secondta" valign="middle">01</td>
							<td >22222</td>
							<td>黎明</td>
							<td>1233444444</td>
							<td>职工</td>
							<td>2016年7月12日</td>
							<td>
								<div class="enable" onclick="status(this)"></div>
							</td>
							<td>大圣烧烤</td>
							<td class="text-center">
								<button type="button" class="btn btn-default btn-table">编辑</button>
								<span class="button-pre"></span>
								<button type="button" class="btn btn-default btn-table red">删除</button>
								<span class="button-pre"></span>
								<button type="button" class="btn btn-default btn-table">编辑</button>
							</td>
						</tr>
						<tr>
							<!--单选-->
							<!--<td class="choice">
				  			<label class="radio"><input type="radio" name="radio" checked><i></i></label>  
				  		</td>-->
							<!--多选-->
							<td class="firsttd">
							<div class="checkboxes checkno" onclick="checks(this);"></div>
						</td>
							<td class="secondta" valign="middle">01</td>
							<td >22222</td>
							<td>黎明</td>
							<td>1233444444</td>
							<td>职工</td>
							<td>2016年7月12日</td>
							<td>
								<div class="enable" onclick="status(this)"></div>
							</td>
							<td>大圣烧烤</td>
							<td class="text-center">
								<button type="button" class="btn btn-default btn-table">编辑</button>
								<span class="button-pre"></span>
								<button type="button" class="btn btn-default btn-table red">删除</button>
								<span class="button-pre"></span>
								<button type="button" class="btn btn-default btn-table">编辑</button>
							</td>
						</tr>
						<tr>
							<!--单选-->
							<!--<td class="choice">
				  			<label class="radio"><input type="radio" name="radio" checked><i></i></label>  
				  		</td>-->
							<!--多选-->
							<td class="firsttd">
							<div class="checkboxes checkno" onclick="checks(this);"></div>
						</td>
							<td class="secondta" valign="middle">01</td>
							<td >22222</td>
							<td>黎明</td>
							<td>1233444444</td>
							<td>职工</td>
							<td>2016年7月12日</td>
							<td>
								<div class="enable" onclick="status(this)"></div>
							</td>
							<td>大圣烧烤</td>
							<td class="text-center">
								<button type="button" class="btn btn-default btn-table">编辑</button>
								<span class="button-pre"></span>
								<button type="button" class="btn btn-default btn-table red">删除</button>
								<span class="button-pre"></span>
								<button type="button" class="btn btn-default btn-table">编辑</button>
							</td>
						</tr>
						<tr>
							<!--单选-->
							<!--<td class="choice">
				  			<label class="radio"><input type="radio" name="radio" checked><i></i></label>  
				  		</td>-->
							<!--多选-->
							<td class="firsttd">
							<div class="checkboxes checkno" onclick="checks(this);"></div>
						</td>
							<td class="secondta" valign="middle">01</td>
							<td >22222</td>
							<td>黎明</td>
							<td>1233444444</td>
							<td>职工</td>
							<td>2016年7月12日</td>
							<td>
								<div class="enable" onclick="status(this)"></div>
							</td>
							<td>大圣烧烤</td>
							<td class="text-center">
								<button type="button" class="btn btn-default btn-table">编辑</button>
								<span class="button-pre"></span>
								<button type="button" class="btn btn-default btn-table red">删除</button>
								<span class="button-pre"></span>
								<button type="button" class="btn btn-default btn-table">编辑</button>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="paging col-md-6 col-md-offset-6 col-sm-12 col-xs-12 text-right">
				<div class="page-page flr">
					<ul class="pagination">
						<li class="epage">
							<a href="#">上一页</a>
						</li>
						<li class="active">
							<a href="#">1 <span class="sr-only">(current)</span></a>
						</li>
						<li>
							<a href="#">2</a>
						</li>
						<li>
							<a href="#">3</a>
						</li>
						<!--<li><a href="#">4</a></li>-->
						<li>
							<a href="#">...</a>
						</li>
						<li class="epage">
							<a href="#">下一页</a>
						</li>
					</ul>
				</div>
				<div class="page-num flr">共9页，每页10条</div>
			</div>
		</div>
		<script src="../assets/js/jquery.min.js"></script>
		<script src="../assets/js/bootstrap.min.js"></script>
		<script type="text/javascript">
		  colorStyle();
      // 给奇数行和偶数行不同的颜色
      function colorStyle(){
        $(".mytable").find("tr:even").addClass("oushu");
        $(".mytable").find("tr:odd").addClass("jishu");
        $(".mytable").find("tr:odd td:first-child").addClass("jishu");
      }

      // 给第一列高度
      firstTrHeight()
      function firstTrHeight() {
        for(var i = $(".mytable tr").length - 1; i >= 0; i--) {
          var trht = $(".mytable tr")[i].offsetHeight
          var domtr = $(".mytable tr")[i];
          // 有30px的边距
          $(domtr).children('td').height(trht - 30);
          $(domtr).children('.firsttd').css('line-height', trht - 30 + 'px');
        };
      }
			function checks(obj) {
				if($(obj).hasClass("checkno")) {
					$(obj).removeClass("checkno");
					$(obj).addClass("checkyes");
				} else {
					$(obj).addClass("checkno");
					$(obj).removeClass("checkyes");
				}
			}

			function status(obj) {
				if($(obj).hasClass("enable")) {
					$(obj).removeClass("enable");
					$(obj).addClass("disable");
				} else {
					$(obj).addClass("enable");
					$(obj).removeClass("disable");
				}
			}
		</script>
	</body>

</html>